export default {
  created() {
    this.getData();
  },
  data() {
    return {
      // 树形分类属性
      categoryList: [],
      // 获取分类列表参数
      reqParams: {
        pagenum: 1,
        pagesize: 7,
      },
      // 分页相关数据
      total: 0,
      // 添加分类相关数据
      addDialogFormVisible: false,
      addForm: {
        // 以下字段是后台接口中需要的数据字段
        cat_pid: 0, // 选择分类的ID 默认0
        cat_name: "", //添加分类的名称
        cat_level: 0, // 添加分类的等级 0 1 2
      },
      addRules: {
        cat_name: [
          { required: true, message: "分类名称必填", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
      },
      // 级联控件中 选中的分类数据
      selectedCateArr: [],
      // 只用两层分类的数据
      cascaderOptions: [],
      // 编辑分类相关数据
      editDialogFormVisible: false,
      editForm: {
        cat_name: "",
      },
      editRules: {
        cat_name: [
          { required: true, message: "分类名称必填", trigger: "blur" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 删除分类
    delCate(id) {
      this.$confirm("确定删除分类么？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          // 发送删除分类的请求
          const {
            data: { meta },
          } = await this.$http.delete(`categories/${id}`);
          if (meta.status !== 200) return this.$message.error(meta.msg);
          this.getData();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 打开编辑分类对话框
    openEditDialog(row) {
      this.editDialogFormVisible = true;
      this.$nextTick(() => {
        // 重置表单内容
        this.$refs.editForm.resetFields();
        // 填充分类名称和id
        this.editForm.cat_name = row.cat_name;
        this.editForm.cat_id = row.cat_id;
      });
    },
    // 提交编辑分类
    editCate() {
      // 提交的时候验证表单内容是否符合规则
      this.$refs.editForm.validate(async (vaild) => {
        if (vaild) {
          const {
            data: { meta },
          } = await this.$http.put(
            `categories/${this.editForm.cat_id}`,
            this.editForm
          );
          if (meta.status !== 200) return this.$message.error(meta.msg);
          this.getData();
          this.editDialogFormVisible = false;
          this.$message.success(meta.msg);
        }
      });
    },
    // 选择级联控件内容
    handleChange() {},
    // 提交添加分类对话框
    async addCat() {
      // addForm 此时的数据是否完整
      // cat_name 双向绑定的 此时有数据的
      // cat_pid cat_level 根据当时的级联选中的内容去赋值
      let cat_pid = 0;
      if (this.selectedCateArr.length) {
        cat_pid = this.selectedCateArr[this.selectedCateArr.length - 1];
      }
      // 父级ID
      this.addForm.cat_pid = cat_pid;
      // 当分类等级 0 1 2 代表三级
      this.addForm.cat_level = this.selectedCateArr.length;
      const {
        data: { meta },
      } = await this.$http.post("categories", this.addForm);
      // console.log(data, meta);
      if (meta.status !== 201) return this.$message.error(meta.msg);
      this.getData();
      this.addDialogFormVisible = false;
      this.$message.success(meta.msg);
    },
    // 打开添加分类对话框
    async openAddDialog() {
      // 渲染级联控件
      const {
        data: { data, meta },
      } = await this.$http.get("categories", { params: { type: 2 } });
      if (meta.status !== 200) return this.$message.error(meta.msg);
      this.cascaderOptions = data;
      // console.log(data, meta);
      this.selectedCateArr = [];
      this.$nextTick(() => {
        this.$refs.addForm.resetFields();
      });

      this.addDialogFormVisible = true;
    },
    // 分页函数
    paper(newPaper) {
      // 根据当前页码 重新获取数据
      this.reqParams.pagenum = newPaper;
      this.getData();
    },
    async getData() {
      // 获取数据
      const {
        data: { data, meta },
      } = await this.$http.get("categories", { params: this.reqParams });
      // console.log(data, meta);
      if (meta.status !== 200)
        return this.$message.error("商品分类数据获取失败");
      this.categoryList = data.result;
      // 设置总页数
      this.total = Math.ceil(data.total / data.pagesize);
    },
  },
};
